import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  RefreshControl,
  StyleSheet,
  useColorScheme,
  Alert,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useAppContext } from '../context/AppContext';
import { useRefresh } from '../hooks';
import { TabScreenProps } from '../types';

type ProfileScreenProps = TabScreenProps<'Profile'>;

const ProfileScreen: React.FC<ProfileScreenProps> = () => {
  const isDarkMode = useColorScheme() === 'dark';
  const navigation = useNavigation();
  const { state: { user } } = useAppContext();
  const { refreshing, refreshData } = useRefresh();

  const menuItems = [
    { 
      icon: '⚙️', 
      title: '设置', 
      onPress: () => navigation.navigate('Settings' as never) 
    },
    { 
      icon: '📊', 
      title: '数据统计', 
      onPress: () => Alert.alert('数据统计', '统计功能开发中...') 
    },
    { 
      icon: '❓', 
      title: '帮助与反馈', 
      onPress: () => Alert.alert('帮助与反馈', '反馈功能开发中...') 
    },
    { 
      icon: 'ℹ️', 
      title: '关于我们', 
      onPress: () => Alert.alert('关于我们', '多功能应用 v1.0.0\n基于React Native开发') 
    },
  ];

  return (
    <ScrollView
      style={styles.container}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={refreshData} />
      }
      showsVerticalScrollIndicator={false}
    >
      <View style={styles.profileCard}>
        <Text style={styles.avatar}>{user.avatar}</Text>
        <Text style={[styles.userName, isDarkMode && styles.lightText]}>
          {user.name}
        </Text>
        <Text style={styles.userEmail}>{user.email}</Text>
      </View>

      <View style={styles.menuContainer}>
        {menuItems.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.menuItem,
              index === menuItems.length - 1 && styles.lastMenuItem,
            ]}
            onPress={item.onPress}
          >
            <Text style={styles.menuIcon}>{item.icon}</Text>
            <Text style={[styles.menuText, isDarkMode && styles.lightText]}>
              {item.title}
            </Text>
            <Text style={styles.menuArrow}>›</Text>
          </TouchableOpacity>
        ))}
      </View>
      
      {/* 底部空间 */}
      <View style={{height: 40}} />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  pageTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#000',
  },
  lightText: {
    color: '#fff',
  },
  profileCard: {
    backgroundColor: '#fff',
    padding: 30,
    borderRadius: 12,
    alignItems: 'center',
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  avatar: {
    fontSize: 48,
    marginBottom: 12,
  },
  userName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
  },
  userEmail: {
    fontSize: 14,
    color: '#666',
  },
  menuContainer: {
    backgroundColor: '#fff',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  lastMenuItem: {
    borderBottomWidth: 0,
  },
  menuIcon: {
    fontSize: 20,
    marginRight: 12,
  },
  menuText: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  menuArrow: {
    fontSize: 20,
    color: '#ccc',
  },
});

export default ProfileScreen;